<template>
  <div class="class_page">
    <van-nav-bar title="优购分类"/>
    <my-search></my-search>
    <div class="content">
      <van-sidebar v-model="active">
        <van-sidebar-item
          :title="item.cat_name"
          v-for="(item, index) in categories"
          :key="index"
        />
      </van-sidebar>
      <ul class="right">
        <li v-for="(item, index) in categories[active]?.children" :key="index">
          <h5>{{ item.cat_name }}</h5>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="(n, i) in item.children"
              :key="i"
              :icon="n.cat_icon"
              :text="n.cat_name"
              @click="$router.push(`/goods/${n.cat_id}`)"
            />
          </van-grid>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import mySearch from "../../components/mySearch.vue";
import api from "../../api/index";
export default {
  components: { mySearch },
  setup() {
    const data = reactive({
      categories: [], // 分类的数据
      active: 0,
    });
    api.get("/categories").then((res) => {
      data.categories = res.message;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.class_page {
  .content {
    height: calc(100% - 85px);
    overflow: hidden;
    display: flex;
    .right {
      flex: 1;
      overflow: auto;
      h5 {
        line-height: 50px;
        text-align: center;
      }
    }
  }
}
</style>